
:host {
  display: flex;
  height: 100%;
  max-height: 100%;
  width: 100%;
  flex-direction: column;

  div.title {
    width: 100%;
    max-width: 100%;
    height: 64px;

    span.home-button {
      cursor: pointer;
    }

    button.title-menu {
      margin-left: auto;
    }
  }

  div.content {
    width: 100%;
    height: calc(100% - 64px);
    max-height: calc(100% - 64px);
    display: flex;
    flex-direction: row;

    .side-container {
      display: flex;
      width: 235px;
      max-width: 235px;
      min-width: 235px;
      flex-direction: column;
      border-right: 1px solid #ddd;
      max-height: 100%;
      overflow-y: auto;


      ul {
        width: 100%;
        margin: 0;
        padding: 0;

        li {
          list-style: none;
          display: flex;
          align-items: center;
          text-indent: 1rem;
          width: 100%;
          height: 48px;
          font-size: 16px;

          &:hover {
            background: rgba(239,239,239);
            cursor: pointer;
          }

          &.active {
            background: rgb(221,221,237);
            color: rgb(60,63,169);
          }
        }
      }
    }
  }
}

@media screen and (max-width: 40rem) {
  :host {
    div.content {
      .side-container {
        display: none;
      }
    }
  }
}
